@import 'base';//@import "_animated";/**     * common */html,body{    position: relative;    height: 100%;//  min-height: REM(1192);}.loading,.loading2{    position: fixed;    width: 100%;    height: 100%;    left: 0;    top: 0;    z-index: 999;    background-color: #ad1f24;    text-align: center;    &-inner{        position: relative;        text-align: center;        top: 46%;        margin-top: REM(-60);    }    img{        width: REM(100);    }    p{        color: #FFFFFF;        font-size: REM(32);        margin:REM(40) auto;    }}.loading2{    z-index: 1001;    background-color: rgba(0,0,0,0.3);}.isLoading{    font-size: REM(24);    color: #333333;    text-align: center;}.wrap{    position: relative;    width:100%;    height: 100%;    margin:0 auto;}.index{    position: relative;    width: 100%;    height: 100%;    background: url(../images/bg1.jpg) center top no-repeat #6e1419;    background-size: cover;    -webkit-background-size: cover;    &-top-btns{        position: absolute;        width: REM(580);        height: REM(60);        top: 0;        right: 0;        background: url(../images/index_top_btns.png) center top no-repeat #6e1419;        background-size: 100% auto;        -webkit-background-size: 100% auto;        li{            width: REM(182);            height: 100%;            float: left;            &:nth-child(3){                width: REM(200);            }        }    }    &-middle{        position: absolute;        width: REM(603);        bottom: TOP(112);        left: REM(78);        &-btns{            position: relative;            width: REM(601);            height: REM(293);            margin:0 auto REM(10);            background: url(../images/index_middle_bg.png) center top no-repeat;            background-size: 100% auto;            -webkit-background-size: 100% auto;            div{                position: absolute;                width: REM(270);                height: REM(88);                background-position: center top;                background-repeat: no-repeat;                background-size:auto REM(88);                -webkit-background-size:auto REM(88);            }            .btn-begin{                left: REM(175);                top: REM(80);                background-image: url(../images/btn_begin.png);            }            .btn-challenge{                top: REM(94);                left: REM(30);                background-image: url(../images/btn_challenge.png);            }            .btn-pk{                top: REM(94);                right: REM(30);                background-image: url(../images/btn_pk.png);            }            .btn-symbol{                left: REM(175);                top: REM(190);                background-image: url(../images/btn_symbol.png);            }        }        &-id{            width: REM(603);            height: REM(124);            background: url(../images/index_btn_id.png) center top no-repeat;            background-size: 100% auto;            -webkit-background-size: 100% auto;        }    }    &-bottom{        position: absolute;        width: REM(755);        height: REM(95);        left: REM(3);        bottom: 0;        z-index: 9;        background: url(../images/index_bottom_btns.png) center top no-repeat;        background-size: 100% auto;        -webkit-background-size: 100% auto;        li{            width: 33.33%;            height: 100%;            float: left;        }    }}//rule.rule{    position: absolute;    width: 100%;    height: 100%;    left: 0;    top: 0;    z-index: 99;    background-color: rgba(60,13,19,0.8);    &-inner{        position: relative;        width: REM(571);        height: REM(806);        margin: 0 auto;        top: 50%;        transform: translateY(-50%);        -webkit-transform: translateY(-50%);        background: url(../images/rule_bg.png) center center no-repeat;        background-size: 100% auto;        -webkit-background-size: 100% auto;    }    &-title{        position: absolute;        width: 100%;        height: REM(60);        top: REM(44);        text-align: center;        img{            height: REM(60);        }    }    &-content{        position: relative;        width: REM(414);        height: REM(620);        margin:0 auto;        top: REM(144);        padding-right: REM(10);        overflow-y: scroll;        -webkit-overflow-scrolling: touch;        p{            font-size: REM(24);            color: #231815;            line-height: 1.3;            margin-bottom: REM(20);            span{                font-weight: bold;                line-height: 1.4;            }        }    }    .btn-close{        position: absolute;        width: REM(96);        height: REM(40);        z-index: 9;        right: REM(26);        top: REM(-56);        background: url(../images/btn_close.png) center center no-repeat;        background-size: 100% auto;        -webkit-background-size: 100% auto;    }}.guanqia{    position: relative;    width: 100%;    height: 100%;    left: 0;    top: 0;    background: url(../images/bg2.jpg) center top no-repeat;    background-size: cover;    -webkit-background-size: cover;    .logo{        position: absolute;        width: REM(80);        height: REM(152);        left: REM(70);        top: TOP(76);        img{            width: 100%;        }    }    &-list{        position: relative;            }    .btn-back{        position: absolute;        width: REM(130);        height: REM(130);        top: TOP(26);        right: REM(30);        background: url(../images/btn_back.png) center center no-repeat;        background-size: 100% auto;        -webkit-background-size: 100% auto;    }    &-inner{        position: absolute;        width: REM(670);        left: REM(45);        height: REM(880);        bottom: TOP(500);        background: url(../images/index_middle_bg.png) center bottom no-repeat;        background-size: 100% auto;        -webkit-background-size: 100% auto;            }    &-title{//     position: relative;       width: REM(197);       height: REM(109);       margin:0 auto;       text-align: center;       img{           width: 100%;       }    }    &-list{        position: relative;        width: REM(620);        height: REM(740);        margin: REM(10) auto 0;        overflow-y: scroll;        -webkit-overflow-scrolling: touch;        li{            float: left;            width: REM(123);            height: REM(127);            background-repeat: no-repeat;            background-position: center center;            background-image: url(../images/guan_box_bg_gray.png);            background-size: 100% 100%;            -webkit-background-size: 100% 100%;            span{                display: block;                text-align: center;                color: #ddd;                height: REM(110);                font-size: REM(36);                line-height: REM(114);                font-weight: bold;            }            &.active{                background-image: url(../images/guan_box_bg.png);                span{                    color: #f5ad4f;                }            }        }    }}//game.game{    position: relative;    width: 100%;    height: 100%;    left: 0;    top: 0;    background: url(../images/bg3.jpg) center top no-repeat;    background-size: cover;    -webkit-background-size: cover;    .error-tips{        position: absolute;         color: #eee;         width: REM(320);         text-align: center;         font-size: REM(20);         left: REM(200);         top: REM(-30);    }    &-inner{        width: REM(636);        position: relative;        margin: 0 auto;        top: 50%;        transform: translateY(-50%);        -webkit-transform: translateY(-50%);            }    &-head{        height: REM(117);        width: REM(576);        padding-left: REM(60);        margin:0 auto;    }    &-btn-back{        float: right;        width: REM(130);        height: REM(130);        background: url(../images/btn_back.png) center center no-repeat;        background-size: 100% auto;        -webkit-background-size: 100% auto;    }    &-guanqia-number{        float: left;        height: REM(117);        width: REM(190);        text-align: center;        color: #efc533;        font-size: REM(42);        font-weight: bold;        line-height: REM(94);        background: url(../images/guanqia_title_flower.png) center bottom no-repeat;        background-size: REM(167) auto;        -webkit-background-size: REM(167) auto;    }    &-container{        position: relative;        width: REM(620);        height: REM(620);        margin:REM(12) auto 0;        background: url(../images/index_middle_bg.png) center bottom no-repeat;        background-size: 100% auto;        -webkit-background-size: 100% auto;        canvas{            width: 100%;            height: 100%;        }    }    &-tips{        position: relative;        width: REM(636);        height: REM(288);        background: url(../images/game_tips.png) center top no-repeat;        background-size: 100% auto;        -webkit-background-size: 100% auto;        div{            span{                position: absolute;                width: REM(28);                height: REM(28);                right: REM(-10);                top: REM(-6);                color: #5a0c10;                font-size: REM(16);                line-height: REM(28);                text-align: center;                background: url(../images/circle_bg.png) center center no-repeat;                background-size: 100% auto;                -webkit-background-size: 100% auto;            }        }    }    .btn-get-card{        position: absolute;        width: REM(260);        height: REM(50);        left: REM(50);        top: REM(98);    }    .btn-get-tips{        position: absolute;        width: REM(240);        height: REM(40);        left: REM(60);        top: REM(146);    }    .btn-go-video{        position: absolute;        width: REM(260);        height: REM(72);        top: REM(100);        right: REM(50);    }    .btn-go-focus{        position: absolute;        width: REM(260);        height: REM(72);        top: REM(186);        left: REM(50);    }    .btn-use-coin{        position: absolute;        width: REM(260);        height: REM(72);        top: REM(186);        right: REM(50);    }    .btn-music{        position: absolute;        width: REM(80);        height: REM(80);        left: REM(24);        top: REM(24);        z-index: 999;        background-repeat: no-repeat;        background-size: REM(70) auto;        -webkit-background-size: REM(70) auto;        background-position: center center;        background-image: url(../images/btn_music_off.png);        &.active{            background-image: url(../images/btn_music_on.png);        }    }}//battle.battle{    position: relative;    width: 100%;    height: 100%;    left: 0;    top: 0;    background: url(../images/bg3.jpg) center top no-repeat;    background-size: cover;    -webkit-background-size: cover;    &-num{        position: absolute;        width: REM(356);        height: REM(72);        line-height: REM(72);        text-align: center;        color: #FFFFFF;        font-size: REM(26);        padding-left: REM(10);        z-index: 9;        top: TOP(50);        left: 0;        background: url(../images/battle_times_bg.png) left top no-repeat;        background-size: 100% auto;        -webkit-background-size: 100% auto;    }    &-inner{        width: REM(636);//      height: REM(960);        position: absolute;        margin: 0 auto;        bottom: TOP(54);        left: REM(62);            }    .logo{        position: absolute;        width: REM(80);        height: REM(152);        right: 0;        top: REM(-160);        img{            width: 100%;        }    }    &-head{        height: REM(42);        width: 100%;        margin:0 auto;        color: #e7e4b9;        font-size: REM(28);        font-weight: bold;        text-align: center;        line-height: REM(42);        background: url(../images/battle_time_bg2.png) center center no-repeat;        background-size: REM(405) auto;        -webkit-background-size: REM(405) auto;        span{//          font-weight: normal;        }    }    &-container{        position: relative;        width: REM(620);        height: REM(620);        margin:REM(12) auto 0;        background: url(../images/index_middle_bg.png) center bottom no-repeat;        background-size: 100% auto;        -webkit-background-size: 100% auto;        canvas{            width: 100%;            height: 100%;        }    }    &-msg{        position: relative;        width: REM(636);        height: REM(218);        padding-top: REM(24);        margin:0 auto;        background: url(../images/index_middle_bg.png) center bottom no-repeat;        background-size: 100% auto;        -webkit-background-size: 100% auto;    }    &-btns{        width: REM(520);        height: REM(83);        margin:0 auto;        text-align: center;        font-size: 0;        div{            font-size: 0;            display: inline-block;            width: REM(248);            background-repeat: no-repeat;            background-size: 100% auto;            -webkit-background-size: 100% auto;            height: REM(83);            position: relative;            span{                position: absolute;                width: REM(32);                height: REM(32);                right: REM(4);                top: REM(-4);                color: #5a0c10;                text-align: center;                font-size: REM(16);                line-height: REM(32);                text-align: center;                background: url(../images/circle_bg.png) center center no-repeat;                background-size: 100% auto;                -webkit-background-size: 100% auto;            }        }        .btn-double{            background-image: url(../images/btn_double.png);        }        .btn-back{            background-image: url(../images/btn_back2.png);        }    }    &-heads{        position: relative;        width: REM(540);        height: REM(88);        margin:REM(20) auto 0;        &>p{            position: absolute;            text-align: center;            width: 100%;            height: 100%;            font-size: REM(30);            line-height: REM(88);            color: #FFFFFF;            z-index: 1;        }        &>div{            position: relative;            width: REM(200);            height: REM(88);            z-index: 2;        }    }        &-head-img{        width: REM(88);        height: REM(88);        background-color: #FFFFFF;        border-radius: 50%;        -webkit-border-radius: 50%;        img{            width: 100%;            height: 100%;            border-radius: 50%;            -webkit-border-radius: 50%;        }    }    .battle-head-left{        float: left;        div{            float: right;        }    }    .battle-head-right{        float:right;        div{            float: left;        }    }    &-score-left,    &-score-right{        width: REM(100);        height: REM(88);        lighting-color: REM(88);        color: #e8e5b9;        font-size: REM(30);        line-height: REM(88);        text-align: center;        font-weight: bold;    }    .btn-music{        position: absolute;        width: REM(70);        height: REM(70);        right: REM(20);        top: REM(20);        z-index: 999;        background-repeat: no-repeat;        background-size: REM(70) auto;        -webkit-background-size: REM(70) auto;        background-position: center center;        background-image: url(../images/btn_music_off.png);        &.active{            background-image: url(../images/btn_music_on.png);        }    }}//lottery.lottery{    position: absolute;    width: 100%;    height: 100%;    left: 0;    top: 0;    z-index: 99;    background-color: rgba(60,13,19,0.8);    &-inner{        position: relative;        width: REM(544);        height: REM(657);        margin:0 auto;        top: 52%;        transform: translateY(-50%);        -webkit-transform: translateY(-50%);        background: url(../images/alert_bg.png) center top no-repeat;        background-size: 100% auto;        -webkit-background-size: 100% auto;    }    &-box{        position: relative;        width: REM(464);        height: REM(492);        margin:0 auto;        top: REM(46);        background: url(../images/index_middle_bg.png) center bottom no-repeat;        background-size: 100% auto;        -webkit-background-size: 100% auto;        li{            position: relative;            display: table;            float: left;            width: REM(153);            height: REM(156);            text-align: center;            background: url(../images/lottery_box_bg.png) center top no-repeat;            background-size: 100% auto;            -webkit-background-size: 100% auto;            span{                display: table-cell;                padding: 0 REM(24);                height: REM(140);                font-size: REM(22);                color: #6e231a;                line-height: REM(34);                vertical-align: middle;            }            &:after{                position: absolute;                content: "";                width: REM(128);                 height: REM(128);                left: REM(6);                border:solid REM(6) #FFFFFF;                top: REM(6);                display: none;                border-radius: REM(10);                -webkit-border-radius: REM(10);                opacity: 0.7;            }            &.active:after{                display: block;            }        }    }    .btn-lottery-begin{        position: relative;        width: REM(248);        height: REM(84);        text-align: center;        margin:REM(72) auto 0;        background: url(../images/btn_bg.png) center center no-repeat;        background-size: 100% auto;        -webkit-background-size: 100% auto;        span{            padding-left: REM(40);            font-size: REM(20);            color: #6e231a;            line-height: REM(72);        }    }    .btn-close{        position: absolute;        width: REM(96);        height: REM(40);        z-index: 9;        right: 0;        top: REM(-70);        background: url(../images/btn_close.png) center center no-repeat;        background-size: 100% auto;        -webkit-background-size: 100% auto;    }    .logo{        position: absolute;        width: REM(80);        height: REM(152);        left: REM(-20);        top: REM(-200);        img{            width: 100%;        }    }}.alert{    position: absolute;    width: 100%;    height: 100%;    left: 0;    top: 0;    z-index: 500;    background-color: rgba(60,13,19,0.8);    &-inner{        position: relative;        width: REM(476);        height: REM(327);        margin:0 auto;        top: 50%;        transform: translateY(-50%);        -webkit-transform: translateY(-50%);        background: url(../images/alert_bg2.png) center top no-repeat;        background-size: 100% auto;        -webkit-background-size: 100% auto;    }    .logo{        position: absolute;        width: REM(80);        height: REM(152);        left: REM(-20);        top: REM(-300);        img{            width: 100%;        }    }    &-content{        position: relative;        width: REM(248);        margin:0 auto;        top: 53%;        transform: translateY(-50%);        -webkit-transform: translateY(-50%);    }    &-title{        text-align: center;        h3{            color: #ebe9bb;            font-size: REM(32);            line-height: 1;            margin:0 auto REM(20);            font-weight: bold;        }        p{           font-size: REM(25);           color: #ebe9bb;        }    }    .btn-fill-address{        position: relative;        width: REM(248);        height: REM(84);        text-align: center;        margin:REM(20) auto 0;        background: url(../images/btn_bg.png) center center no-repeat;        background-size: 100% auto;        -webkit-background-size: 100% auto;        span{            padding-left: REM(40);            font-size: REM(20);            color: #6e231a;            line-height: REM(72);        }    }    .btn-close{        position: absolute;        width: REM(96);        height: REM(40);        z-index: 9;        right: 0;        top: REM(-70);        background: url(../images/btn_close.png) center center no-repeat;        background-size: 100% auto;        -webkit-background-size: 100% auto;    }    &-btns{        width: REM(400);        height: REM(50);        margin:REM(24) auto 0;        div{            width: REM(176);            height: REM(48);            color: #6e231a;            padding-left: REM(13);            text-align: center;            font-size: REM(20);            line-height: REM(46);            background: url(../images/btn_bg2.png) center center no-repeat;            background-size: 100% auto;            -webkit-background-size: 100% auto;        }        .btn-yes{            float: right;        }        .btn-no{            float: left;        }    }}//not finish.alert-notfinish,.alert-double,.alert-exitpk,.alert-give,.alert-exit,.alert-getsymbol{    .alert-content{        width: REM(400);    }}.alert-exitpk{    .alert-btns div{        width: REM(150);        padding-left: REM(39);        letter-spacing: 1px;    }}.alert-share{    .alert-btns{        width: REM(176);    }    .btn-share{        width: REM(150);        padding-left: REM(39);        letter-spacing: 1px;    }}.alert-common .alert-content{    width: REM(400);}//cards.cards{    position: relative;    width: 100%;    height: 100%;    left: 0;    top: 0;    background: url(../images/bg2.jpg) center top no-repeat;    background-size: cover;    -webkit-background-size: cover;    .logo{          position: absolute;        width: REM(80);        height: REM(152);        left: REM(70);        top: TOP(76);        img{            width: 100%;        }    }    &-inner{        position: absolute;        width: REM(640);        height: REM(660);        left: REM(60);        bottom: TOP(50);        background: url(../images/index_middle_bg.png) center bottom no-repeat;        background-size: 100% auto;        -webkit-background-size: 100% auto;        .cards-tips{            display: table;            position: relative;            width: REM(524);            height: REM(90);            text-align: center;            margin:0 auto REM(20);            background-color: #FFFFFF;            border-radius: REM(10);            -webkit-border-radius: REM(10);            span{                text-align: left;                width: REM(380);                display: inline-block;                font-size: REM(26);                color: #6b2218;                vertical-align: middle;                background: url(../images/icon_arrow.png) right center no-repeat;                background-size: REM(28) auto;                -webkit-background-size: REM(28) auto;            }        }    }    &-btn-detail{        position: relative;        width: REM(230);        text-align: center;        color: #dc852c;        font-size: REM(24);        margin:0 auto REM(20);        padding-bottom: REM(6);        &:after{            content: '';            position: absolute;            bottom: 0;            left: 0;            background: #dc852c;            width: 100%;            height: 1px;            -webkit-transform: scaleY(0.5);            transform: scaleY(0.5);            -webkit-transform-origin: 0 0;            transform-origin: 0 0;        }            }    &-title{        width: REM(640);        height: REM(40);        margin:0 auto REM(84);        img{            width: 100%;        }    }    .btn-back{        position: relative;        width: REM(248);        height: REM(84);        margin:REM(56) auto 0;        background: url(../images/btn_back2.png) center center no-repeat;        background-size: 100% auto;        -webkit-background-size: 100% auto;    }}//video.video{    position: relative;    width: 100%;    height: 100%;    left: 0;    top: 0;    background: url(../images/bg2.jpg) center top no-repeat;    background-size: cover;    -webkit-background-size: cover;    .logo{          position: absolute;        width: REM(80);        height: REM(152);        left: REM(70);        top: TOP(76);        img{            width: 100%;        }    }    &-inner{        position: absolute;        width: REM(632);        height: REM(820);        left: REM(64);        bottom: TOP(50);        background: url(../images/index_middle_bg.png) center bottom no-repeat;        background-size: 100% auto;        -webkit-background-size: 100% auto;    }    &-time{        width: REM(632);        height: REM(60);        margin:0 auto;        text-align: center;        color: #FFFFFF;        font-size: REM(26);        line-height: REM(60);        background: url(../images/time_bg.png) center top no-repeat;        background-size: 100% auto;        -webkit-background-size: 100% auto;    }    .btn-back{        position: relative;        width: REM(248);        height: REM(84);        margin:REM(20) auto 0;        background: url(../images/btn_back2.png) center center no-repeat;        background-size: 100% auto;        -webkit-background-size: 100% auto;    }    &-container{        position: relative;        width: REM(370);        height: REM(592);        top: 0;        margin:REM(40) auto 0;        video{            width: 100%;            vertical-align: middle;        }        &.waiting{//          height: 100%;            background-color: #999;        }    }    .btn-play{        position: absolute;        z-index: 101;        width: REM(120);        height: REM(80);        left: REM(125);        top: 50%;        margin-top: REM(-40);        background: url(../images/btn_play.png) center center no-repeat;        background-size: 100% auto;        -webkit-background-size: 100% auto;    }}//focus.focus{    position: relative;    width: 100%;    height: 100%;    left: 0;    top: 0;    background: url(../images/bg2.jpg) center top no-repeat;    background-size: cover;    -webkit-background-size: cover;    .logo{          position: absolute;        width: REM(80);        height: REM(152);        left: REM(70);        top: TOP(76);        img{            width: 100%;        }    }    &-inner{        position: absolute;        width: REM(640);        height: REM(820);        left: REM(60);        bottom: TOP(50);        background: url(../images/index_middle_bg.png) center bottom no-repeat;        background-size: 100% auto;        -webkit-background-size: 100% auto;    }    &-qrcode{        position: relative;        width: REM(288);        height: REM(320);        margin:0 auto REM(54);        img{            width: 100%;        }    }    &-tips,    &-live{         width: REM(603);        height: REM(92);        margin:0 auto REM(20);        img{            width: 100%;        }    }    &-btns{        margin:REM(52) auto 0;        div{            width: REM(248);            height: REM(80);            margin:0 auto;            background-position: center top;            background-repeat: no-repeat;            background-size: 100% auto;            -webkit-background-size: 100% auto;        }    }    .btn-back{        background-image: url(../images/btn_back2.png);    }    .btn-live{        background-image: url(../images/btn_live.png);    }}//pk.pk{    position: relative;    width: 100%;    height: 100%;    left: 0;    top: 0;    background: url(../images/bg2.jpg) center top no-repeat;    background-size: cover;    -webkit-background-size: cover;    .logo{          position: absolute;        width: REM(80);        height: REM(152);        left: REM(70);        top: TOP(76);        img{            width: 100%;        }    }    &-title{        width: REM(397);        height: REM(120);        margin:0 auto REM(46);        img{            width: 100%;        }    }    &-times{        width: REM(632);        height: REM(60);        line-height: REM(60);        margin:0 auto;        text-align: center;        color: #FFFFFF;        font-size: REM(26);        background: url(../images/time_bg.png) center top no-repeat;        background-size: 100% auto;        -webkit-background-size: 100% auto;    }    &-inner{        position: absolute;        width: REM(640);        height: REM(820);        left: REM(60);        bottom: TOP(60);        background: url(../images/index_middle_bg.png) center bottom no-repeat;        background-size: 100% auto;        -webkit-background-size: 100% auto;    }    &-heads{        position: relative;        width: REM(380);        height: REM(138);        margin:REM(60) auto 0;        div{            width: REM(138);            height: REM(138);            background-color: #FFFFFF;            border-radius: 50%;            -webkit-border-radius: 50%;            overflow: hidden;            img{                width: 100%;                height: 100%;            }        }        p{            position: absolute;            width: 100%;            height: 100%;            text-align: center;            color: #FFFFFF;            font-size: REM(30);            line-height: REM(138);        }        &-left{            float: left;        }        &-right{            float: right;        }        span{            position: absolute;            display: block;            width: REM(138);            height: REM(36);            color: #00ff80;            font-size: REM(20);            text-align: center;            top: REM(138);            line-height: REM(36);            &.pk-status-left{                left: 0;            }            &.pk-status-right{                 right: 0;            }        }    }    &-btns{        position: relative;        width: REM(248);        height: REM(262);        margin:REM(66) auto 0;//      background: url(../images/pk_btns.png) center top no-repeat;//      background-size: 100% auto;//      -webkit-background-size: 100% auto;        div{            position: relative;            width: REM(263);            height: REM(86);            left: 0;            margin:0 auto;            text-align: center;            background: url(../images/btn_bg.png) center top no-repeat;            background-size: 100% auto;            -webkit-background-size: 100% auto;            span{                letter-spacing: 1px;                padding-left: REM(40);                font-size: REM(20);                color: #6e231a;                line-height: REM(78);            }        }        .btn-invite{                   }        .btn-begin{           span{               padding-left: REM(20);           }        }        .btn-back{           span{               padding-left: REM(20);           }        }    }    &-chances{        width: 100%;        color: #e7e4b8;        font-size: REM(32);        text-align: center;        font-weight: bold;    }}//rank.rank{    position: relative;    width: 100%;    height: 100%;    left: 0;    top: 0;    background: url(../images/bg3.jpg) center top no-repeat;    background-size: cover;    -webkit-background-size: cover;    &-inner{        position: absolute;        width: REM(600);//      height: REM(800);        padding:0 REM(50);        left: REM(30);        top: 50%;        transform: translateY(-50%);        -webkit-transform: translateY(-50%);        background: url(../images/index_middle_bg.png) center bottom no-repeat;        background-size: 100% auto;        -webkit-background-size: 100% auto;    }    &-top{        width: 100%;        height: REM(152);        margin:0 auto REM(24);    }    .logo{        width: REM(80);        height: REM(152);        float: right;        img{            width: 100%;        }    }    &-title{        position: relative;        float: left;        top: REM(42);        width: REM(291);        height: REM(107);        img{            width: 100%;        }    }    &-table{        width: REM(600);        height: REM(760);        background-color: #FFFFFF;        border-radius: REM(20);        -webkit-border-radius: REM(20);        overflow: hidden;    }    .table-head{        position: relative;        width: 100%;        ul{            height: REM(46);            background-color: #eda851;            li{                position: relative;                float: left;                width: REM(100);                height: REM(46);                line-height: REM(46);                text-align: center;                color: #570b10;                font-size: REM(20);                &:after{                  content: '';                  position: absolute;                  top: 0;                  right: 0;                  background: #fff;                  height: 100%;                  width: 1px;                  -webkit-transform: scaleX(0.5);                  transform: scaleX(0.5);                  -webkit-transform-origin: 0 0;                  transform-origin: 0 0;                }                &:last-child:after{                    display: none;                }                span{                    text-align: center;                    margin:0 auto;                    position: relative;                    top: 50%;                    line-height: REM(22);                    display: block;                    transform: translateY(-50%);                    -webkit-transform: translateY(-50%);                }                               &:nth-child(1){                    width: REM(70);                }                &:nth-child(2){                    width: REM(90);                }                &:nth-child(3){                    width: REM(136);                }                &:nth-child(4){                    width: REM(100);                }                &:nth-child(5){                    width: REM(120);                }                &:nth-child(6){                    width: REM(80);                }            }        }    }    .table-list{        position: relative;        width: 100%;        height: REM(712);        overflow-y: scroll;        ul{            width: 100%;            height: REM(70);            position: relative;            &:after{                content: '';                position: absolute;                bottom: 0;                left: 0;                background: #f1bb78;                width: 100%;                height: 1px;                -webkit-transform: scaleY(0.5);                transform: scaleY(0.5);                -webkit-transform-origin: 0 0;                transform-origin: 0 0;            }            &:nth-child(1){                li{                    &:nth-child(1) span{                        width: REM(32);                        height: REM(38);                        text-indent: -10000px;                        overflow: hidden;                        line-height: 10000px;                        background:url(../images/rank_first.png) center center no-repeat;                        background-size: 100% auto;                        -webkit-background-size: 100% auto;                    }                }            }            &:nth-child(2){                li{                    &:nth-child(1) span{                        width: REM(32);                        height: REM(38);                        text-indent: -10000px;                        overflow: hidden;                        line-height: 10000px;                        background:url(../images/rank_second.png) center center no-repeat;                        background-size: 100% auto;                        -webkit-background-size: 100% auto;                    }                }            }            &:nth-child(3){                li{                    &:nth-child(1) span{                        width: REM(32);                        height: REM(38);                        text-indent: -10000px;                        overflow: hidden;                        line-height: 10000px;                        background:url(../images/rank_third.png) center center no-repeat;                        background-size: 100% auto;                        -webkit-background-size: 100% auto;                    }                }            }            li{                float: left;                height: REM(70);                text-align: center;                position: relative;                width: REM(100);                &:last-child:after{                    display: none;                }                &:nth-child(1){                    width: REM(70);                }                &:nth-child(2){                    width: REM(90);                    span{                        width: REM(60);                        height: REM(60);                        border-radius: 50%;                        -webkit-border-radius: 50%;                        overflow: hidden;                        img{                            width: 100%;                            height: 100%;                            border-radius: 50%;                            -webkit-border-radius: 50%;                        }                    }                }                &:nth-child(3){                    width: REM(136);                    span{                        width: 100%;                        max-height: REM(66);                        overflow: hidden;                    }                }                &:nth-child(4){                    width: REM(100);                 }                &:nth-child(5){                    width: REM(120);                }                &:nth-child(6){                    width: REM(80);                }                &:after{                     content: '';                     position: absolute;                     top: 0;                     right: 0;                     background: #f1bb78;                     height: 100%;                     width: 1px;                     -webkit-transform: scaleX(0.5);                     transform: scaleX(0.5);                     -webkit-transform-origin: 0 0;                     transform-origin: 0 0;                }                span{                    display: block;                    position: relative;                    top: 50%;                    margin:0 auto;                    transform: translateY(-50%);                    -webkit-transform: translateY(-50%);                    text-align: center;                    color: #570b10;                    line-height: REM(24);                    font-size: REM(20);                }            }        }    }    .btn-back{        position: relative;        width: REM(248);        height: REM(84);        margin:REM(24) auto 0;        background: url(../images/btn_back2.png) center center no-repeat;        background-size: 100% auto;        -webkit-background-size: 100% auto;    }}//personal.personal{    position: relative;    width: 100%;    height: 100%;    left: 0;    top: 0;    background: url(../images/bg2.jpg) center top no-repeat;    background-size: cover;    -webkit-background-size: cover;    .logo{          position: absolute;        width: REM(80);        height: REM(152);        left: REM(70);        top: TOP(76);        img{            width: 100%;        }    }    &-title{        width: REM(355);        height: REM(103);        margin:0 auto REM(46);        img{            width: 100%;        }    }    &-inner{        position: absolute;        width: REM(640);        height: REM(820);        left: REM(60);        bottom: TOP(60);    }    &-container{        position: relative;        height: REM(550);        width: REM(526);        margin:0 auto;        padding:0 REM(56);        background: url(../images/index_middle_bg.png) center bottom no-repeat;        background-size: 100% auto;        -webkit-background-size: 100% auto;        li{            text-align: center;            width: 100%;            height: REM(90);            margin: 0 auto REM(24);            background-color: #FFFFFF;            border-radius: REM(20);            -webkit-border-radius: REM(20);            &:last-child{                margin-bottom: REM(16);            }            img{                width: 100%;            }            span{                display: inline-block;                height: REM(90);                font-size: REM(36);                color: #6b2218;                line-height: REM(90);                vertical-align: top;            }        }        .txt{            width: REM(290);            text-align: left;        }        .icon-flower{            width: REM(38);            img{                position: relative;                top: REM(30);            }        }        .icon-arrow{            width: REM(28);            img{                position: relative;                top: REM(30);            }           }    }    .btn-go-live{        width: REM(603);        height: REM(124);        margin:REM(26) auto 0;        img{            width: 100%;        }    }    &-btns{        width: 100%;        height: REM(88);        div{            width: REM(263);            height: REM(88);            background-position: center top;            background-size: 100% auto;            -webkit-background-size: 100% auto;            background-repeat: no-repeat;        }        .btn-live{            float: left;            background-image: url(../images/btn_live.png);        }        .btn-exit{            float: right;            background-image: url(../images/btn_exit.png);        }    }    .btn-back{        position: absolute;        width: REM(130);        height: REM(130);        right: REM(30);        top: REM(74);        background: url(../images/btn_back.png) center center no-repeat;        background-size: 100% auto;        -webkit-background-size: 100% auto;    }}.package{    &-inner{        position: relative;        width: REM(576);        height: REM(702);        margin:0 auto;        top: 53%;        transform: translateY(-50%);        -webkit-transform: translateY(-50%);    }    &-img{        width: 100%;        height: 100%;        img{            width: 100%;        }    }    .logo{        position: absolute;        width: REM(80);        height: REM(152);        left: REM(-20);        top: REM(-200);        img{            width: 100%;        }    }    .btn-close{        position: absolute;        width: REM(96);        height: REM(40);        z-index: 9;        right: 0;        top: REM(-70);        background: url(../images/btn_close.png) center center no-repeat;        background-size: 100% auto;        -webkit-background-size: 100% auto;    }}//prizeRecord.prizeRecord{    position: relative;    width: 100%;    height: 100%;    left: 0;    top: 0;    background: url(../images/bg3.jpg) center top no-repeat;    background-size: cover;    -webkit-background-size: cover;    &-inner{        position: absolute;        width: REM(600);//      height: REM(800);        padding:0 REM(50);        left: REM(30);        top: 50%;        transform: translateY(-50%);        -webkit-transform: translateY(-50%);        background: url(../images/index_middle_bg.png) center bottom no-repeat;        background-size: 100% auto;        -webkit-background-size: 100% auto;    }    &-top{        width: 100%;        height: REM(152);        margin:0 auto REM(24);    }    .logo{        width: REM(80);        height: REM(152);        float: right;        img{            width: 100%;        }    }    &-title{        position: relative;        float: left;        top: REM(54);        width: REM(317);        height: REM(86);        img{            width: 100%;        }    }    &-table{        width: REM(600);        height: REM(760);        background-color: #FFFFFF;        border-radius: REM(20);        -webkit-border-radius: REM(20);        overflow: hidden;    }    .table-head{        position: relative;        width: 100%;        ul{            width: 100%;            height: REM(46);            background-color: #eda851;            li{                position: relative;                float: left;                width: REM(120);                height: REM(46);                line-height: REM(46);                text-align: center;                color: #570b10;                font-weight: bold;                font-size: REM(20);                &:after{                  content: '';                  position: absolute;                  top: 0;                  right: 0;                  background: #fff;                  height: 100%;                  width: 1px;                  -webkit-transform: scaleX(0.5);                  transform: scaleX(0.5);                  -webkit-transform-origin: 0 0;                  transform-origin: 0 0;                }                &:last-child:after{                    display: none;                }                &:nth-child(1){                    width: REM(150);                }                &:nth-child(2){                    width: REM(60);                }                &:nth-child(3){                    width: REM(126);                }                &:nth-child(4){                    width: REM(120);                }                &:nth-child(5){                    width: REM(140);                }            }        }    }    .table-list{        position: relative;        width: 100%;        height: REM(712);        overflow-y: scroll;        -webkit-overflow-scrolling: touch;        ul{            width: 100%;            height: REM(60);            position: relative;            &:after{                content: '';                position: absolute;                bottom: 0;                left: 0;                background: #f1bb78;                width: 100%;                height: 1px;                -webkit-transform: scaleY(0.5);                transform: scaleY(0.5);                -webkit-transform-origin: 0 0;                transform-origin: 0 0;            }            li{                float: left;                height: REM(60);                text-align: center;                position: relative;                width: REM(130);                &:nth-child(1){                    width: REM(150);                }                &:nth-child(2){                    width: REM(60);                }                &:nth-child(3){                    width: REM(126);                }                &:nth-child(4){                    width: REM(120);                }                &:nth-child(5){                    width: REM(140);                    &:after{                        display: none;                    }                }                &:after{                     content: '';                     position: absolute;                     top: 0;                     right: 0;                     background: #f1bb78;                     height: 100%;                     width: 1px;                     -webkit-transform: scaleX(0.5);                     transform: scaleX(0.5);                     -webkit-transform-origin: 0 0;                     transform-origin: 0 0;                }                span{                    display: block;                    position: relative;                    top: 50%;                    transform: translateY(-50%);                    -webkit-transform: translateY(-50%);                    text-align: center;                    color: #570b10;                    line-height: REM(24);//                  vertical-align: middle;                    font-size: REM(20);                }                .btn-get{                    width: REM(120);                    height: REM(50);                    margin:0 auto;                    background-size: REM(95) auto;                    -webkit-background-size: REM(95) auto;                    background-image: url(../images/btn_status_done.png);                    background-position: center center;                    background-repeat: no-repeat;                    &.active{                        background-image: url(../images/btn_status_get.png);                    }                }            }        }    }    .btn-back{        position: relative;        width: REM(248);        height: REM(84);        margin:REM(24) auto 0;        background: url(../images/btn_back2.png) center center no-repeat;        background-size: 100% auto;        -webkit-background-size: 100% auto;    }}//pkRecord.pkRecord{    position: relative;    width: 100%;    height: 100%;    left: 0;    top: 0;    background: url(../images/bg2.jpg) center top no-repeat;    background-size: cover;    -webkit-background-size: cover;    .logo{          position: absolute;        width: REM(80);        height: REM(152);        left: REM(70);        top: TOP(76);        img{            width: 100%;        }    }    &-times{        width: REM(632);        height: REM(60);        line-height: REM(60);        margin:0 auto;        text-align: center;        color: #FFFFFF;        font-size: REM(26);        background: url(../images/time_bg.png) center top no-repeat;        background-size: 100% auto;        -webkit-background-size: 100% auto;    }    &-title{        width: REM(392);        height: REM(88);        margin:0 auto REM(46);        img{            width: 100%;        }    }    &-inner{        position: absolute;        width: REM(714);        height: REM(840);        left: REM(23);        bottom: TOP(60);        background: url(../images/index_middle_bg.png) center bottom no-repeat;        background-size: 100% auto;        -webkit-background-size: 100% auto;    }    &-container{        position: relative;        width: REM(632);        height: REM(530);        margin:0 auto;        background-color: #FFFFFF;        border-radius: REM(10);        -webkit-border-radius: REM(10);        ul{            position: relative;            width: REM(480);            height: REM(490);            margin:0 auto;            top: REM(16);            overflow-y: scroll;            -webkit-overflow-scrolling: touch;            li{                position: relative;                width: 100%;                text-align: center;                height: REM(138);                padding-top: REM(24);                &:after{                    content: '';                    position: absolute;                    bottom: 0;                    left: 0;                    background: #d4d2cf;                    width: 100%;                    height: 1px;                    -webkit-transform: scaleY(0.5);                    transform: scaleY(0.5);                    -webkit-transform-origin: 0 0;                    transform-origin: 0 0;                }                &>p{                    position: absolute;                    width: 100%;                    height: REM(138);                    text-align: center;                    line-height: REM(90);                    color: #580c10;                    font-size: REM(22);                }            }            .head-left,            .head-right{                position: relative;                display: inline-block;                width: REM(200);                height: REM(120);                z-index: 2;            }            .head-left{                margin-right: REM(24);                .pk-result-icon{                    float: right;                }            }            .head-right{                margin-left: REM(24);                .pk-result-icon{                    float: left;                }            }            .pk-result-icon{                position: relative;                display: block;                width: REM(68);                height: REM(68);                background-size: REM(63) REM(63);                -webkit-background-size: REM(63) REM(63);                background-position: center center;                background-repeat: no-repeat;                background-image: url(../images/icon_lose.png);                span{                    display: none;                }            }            .win{                background-image: url(../images/icon_win.png);                span{                    position: absolute;                    width: 100%;                    display: block;                    color: #580c10;                    font-size: REM(22);                    line-height: REM(26);                    text-align: center;                    top: REM(80);                }            }            .head-img{                float: left;                display: block;                width: REM(128);                div{                    width: REM(68);                    height: REM(68);                    margin:0 auto;                    border-radius: 50%;                    -webkit-border-radius: 50%;                    background-color: #f5cc8a;                    img{                        width: 100%;                        height: 100%;                        border-radius: 50%;                        -webkit-border-radius: 50%;                    }                }                span{                    display: block;                    color: #580c10;                    font-size: REM(22);                    line-height: REM(26);                    margin:REM(10) auto 0;                }            }        }    }    .btn-back{        position: relative;        width: REM(248);        height: REM(84);        margin:REM(24) auto 0;        background: url(../images/btn_back2.png) center center no-repeat;        background-size: 100% auto;        -webkit-background-size: 100% auto;    }}//address.address{    position: relative;    width: 100%;    height: 100%;    left: 0;    top: 0;    background: url(../images/bg2.jpg) center top no-repeat;    background-size: cover;    -webkit-background-size: cover;    .logo{          position: absolute;        width: REM(80);        height: REM(152);        left: REM(40);        top: REM(-200);        img{            width: 100%;        }    }    &-title{        width: REM(326);        height: REM(92);        margin:0 auto REM(46);        img{            width: 100%;        }    }    &-inner{        position: absolute;        width: REM(494);        padding:0 REM(100);        height: REM(810);        left: REM(33);        bottom: TOP(60);        background: url(../images/index_middle_bg.png) center bottom no-repeat;        background-size: 100% auto;        -webkit-background-size: 100% auto;    }    &-container{        position: relative;        width: 100%;        height: REM(340);        margin:0 auto;    }    .input-list{        width: REM(494);        height: REM(64);        margin:0 auto REM(18);        border-radius: REM(6);        -webkit-border-radius: REM(6);        text-align: center;        &>div{            float: left;            height: REM(64);        }        .input-title{            width: REM(108);            background-color: #d49c61;            color: #570b10;            font-size: REM(24);            line-height: REM(64);        }        .input-wrap{            width: REM(384);            background-color: #FFFFFF;            input{                position: relative;                width: REM(340);                height: REM(48);                line-height: REM(50);                top: REM(8);                left: REM(12);                font-size: REM(26);                color: #000000;                border: none;                outline: none;                background: none;                vertical-align: top;            }        }    }    .select-list{        position: relative;        width: REM(494);        height: REM(56);        margin:REM(48) auto 0;        &>div{            float: left;            width: REM(164);            height: REM(56);            background: url(../images/select_icon.png) right center #FFFFFF no-repeat;            background-size: auto 100%;            -webkit-background-size: auto 100%;        }        select{            width: REM(160);            background: none;            padding-left: REM(6);            padding-right: REM(50);            text-align: center;            height: REM(56);            font-size: REM(24);            color: #570b10;            vertical-align: top;            text-align-last: center;            border: none;            appearance:none;               -moz-appearance:none;            -webkit-appearance:none;            option{                text-align: center;                text-align-last: center;            }        }    }    &-btns{        width: REM(248);        margin:REM(80) auto 0;        div{            width: REM(228);            height: REM(84);            padding-left: REM(20);            letter-spacing: 1px;            text-align: center;            font-size: REM(24);            color: #570b10;            line-height: REM(74);            background: url(../images/btn_bg.png) center center no-repeat;            background-size: 100% auto;            -webkit-background-size: 100% auto;        }    }    .input-detail{        width: REM(494);        height: REM(56);        background-color: #FFFFFF;        margin:REM(20) auto 0;        input{            position: relative;            width: REM(470);            height: REM(48);            line-height: REM(50);            top: REM(4);            text-align: center;            left: REM(12);            font-size: REM(24);            color: #000000;            border: none;            outline: none;            background: none;            vertical-align: top;        }    }    .idCode{        width: REM(494);        height: REM(56);        margin:REM(20) auto 0;        border-radius: REM(6);        -webkit-border-radius: REM(6);        text-align: center;        &>div{            float: left;            height: REM(56);        }        .input-title{            width: REM(108);            background-color: #d49c61;            color: #570b10;            font-size: REM(24);            line-height: REM(56);        }        .input-wrap{            width: REM(230);            background-color: #FFFFFF;            input{                position: relative;                width: REM(200);                height: REM(48);                line-height: REM(50);                top: REM(4);                left: 0;                font-size: REM(26);                color: #000000;                border: none;                outline: none;                background: none;                vertical-align: top;            }        }        &-img{            width: REM(148);            float: right !important;            height: REM(56);            background-color: #d8d8d8;            img{                width: 100%;                height: 100%;            }        }    }}.symbol{    position: relative;    width: 100%;    height: 100%;    left: 0;    top: 0;    background: url(../images/bg3.jpg) center top no-repeat;    background-size: cover;    -webkit-background-size: cover;    &-inner{        width: REM(666);        position: relative;        margin: 0 auto;        top: 52%;        transform: translateY(-50%);        -webkit-transform: translateY(-50%);            }    &-title{        position: relative;        width: REM(587);        height: REM(194);        margin:0 auto;        img{            width: 100%;        }    }    &-tips{        position: relative;        color: #e8e5b9;        font-size: REM(20);        text-align: center;        margin: REM(10) auto 0;    }    .logo{          position: absolute;        width: REM(80);        height: REM(152);        right: REM(50);        top:REM(-74);        img{            width: 100%;        }    }    &-cards{        position: relative;        width: REM(666);        margin:REM(30) auto 0;        height: REM(520);        background-color: #bb1b21;        border-radius: REM(20);        -webkit-border-radius: REM(20);        &-inner{            position: relative;            width: REM(630);            margin:0 auto;            height: REM(440);            top: REM(44);            background: url(../images/fish_bg.png) center REM(30) no-repeat;            background-size: REM(520) auto;            -webkit-background-size: REM(520) auto;            ul{                text-align: center;                font-size: 0;                li{                    display: inline-block;                    width: REM(151);                    height: REM(214);                    background-size: 100% auto;                    -webkit-background-size: 100% auto;                    background-position: center top;                    background-repeat: no-repeat;                    div{                        position: relative;                        width: 100%;                        height: REM(28);                        text-align: center;                        color: #6b2218;                        font-size: REM(22);                        line-height: REM(28);                        top: REM(172);                        left: 0;                        span{                            display: inline-block;//                          width: REM(28);                            height: REM(28);                            padding:0 REM(4);                            background-color: #eeb164;                            border-radius: REM(14);                            -webkit-border-radius: REM(14);                            text-align: center;                            font-size: REM(22);                            line-height: REM(28);                            margin-left: REM(4);                        }                    }                }            }        }    }    .symbol-cards-1{        background-image: url(../images/symbol_he.png);        margin-right: REM(6);        margin-bottom: REM(6);    }    .symbol-cards-2{        background-image: url(../images/symbol_hua.png);    }    .symbol-cards-3{        background-image: url(../images/symbol_jin.png);        margin-right: REM(6);    }    .symbol-cards-4{        background-image: url(../images/symbol_se.png);        margin-right: REM(6);    }    .symbol-cards-5{        background-image: url(../images/symbol_shi.png);        margin-right: REM(6);    }    .symbol-cards-6{        background-image: url(../images/symbol_dai.png);    }    &-code{        width: REM(666);        height: REM(170);        margin:REM(20) auto 0;        padding: REM(40) 0 0;        background-color: #bb1b21;        border-radius: REM(20);        -webkit-border-radius: REM(20);        &-input{            position: relative;            height: REM(52);            width: REM(628);            left: REM(30);        }    }    .input-list{        float: left;        width: REM(392);        height: REM(52);        margin:0 auto;        border-radius: REM(6);        -webkit-border-radius: REM(2);        &>div{            float: left;            height: REM(52);        }        .input-title{            width: REM(110);            text-align: center;            background-color: #d49c61;            color: #570b10;            font-size: REM(24);            line-height: REM(52);            letter-spacing: 1px;        }        .input-wrap{            width: REM(280);            background-color: #FFFFFF;            input{                position: relative;                width: REM(240);                height: REM(46);                line-height: REM(48);                top: REM(2);                left: REM(24);                font-size: REM(24);                color: #000000;                border: none;                outline: none;                background: none;                vertical-align: top;            }        }    }    .btn-submit{        float: left;        width: REM(233);        height: REM(72);        background: url(../images/btn_submit2.png) center top no-repeat;        background-size: 100% auto;        -webkit-background-size: 100% auto;    }    &-btns{        width: REM(580);        height: REM(84);        margin:REM(24) auto 0;        text-align: center;        div{            display: inline-block;            height: REM(84);            width: REM(228);            color: #6e231a;            font-size: REM(24);            line-height: REM(74);            padding-left: REM(20);            letter-spacing: 1px;            background: url(../images/btn_bg.png) center top no-repeat;            background-size: 100% auto;            -webkit-background-size: 100% auto;        }    }}//webchat.wechat{    position: relative;    width: 100%;    height: 100%;    left: 0;    top: 0;    background: url(../images/bg2.jpg) center top no-repeat;    background-size: cover;    -webkit-background-size: cover;    .logo{          position: absolute;        width: REM(80);        height: REM(152);        left: REM(0);        top: REM(-200);        img{            width: 100%;        }    }    &-title{        width: REM(590);        height: REM(208);        margin:0 auto REM(10);        img{            width: 100%;        }    }    &-inner{        position: absolute;        width: REM(590);        padding:0 REM(26);        height: REM(810);        left: REM(59);        bottom: TOP(60);        background: url(../images/index_middle_bg.png) center bottom no-repeat;        background-size: 100% auto;        -webkit-background-size: 100% auto;    }    &-container{        position: relative;        width: REM(540);        height: REM(548);        margin:0 auto;        li{            position: absolute;            width: REM(196);            height: REM(200);            display: table;            text-align: center;            background: url(../images/lottery_box_bg.png) center top no-repeat;            background-size: 100% auto;            -webkit-background-size: 100% auto;            span{                display: table-cell;                font-size: REM(24);                color: #6e231a;                line-height: REM(34);                vertical-align: middle;                padding: 0 REM(40);            }            &:after{                position: absolute;                content: "";                width: REM(166);                height: REM(166);                left: REM(8);                border:solid REM(6) #FFFFFF;                top: REM(10);                display: none;                border-radius: REM(10);                -webkit-border-radius: REM(10);                opacity: 0.7;            }            &.active:after{                display: block;            }            &:nth-child(1){                left: 0;                top: 0;            }            &:nth-child(8){                left: REM(171);                top: 0;            }            &:nth-child(7){                right: 0;            }            &:nth-child(2){                left: 0;                top: REM(176);            }            &:nth-child(6){                right: 0;                top: REM(176);            }            &:nth-child(3){                left: 0;                top: REM(352);            }            &:nth-child(4){                left: REM(171);                top: REM(352);            }            &:nth-child(5){                right: 0;                top: REM(352);            }        }        .btn-lottery{            position: absolute;            width: REM(178);            height: REM(178);            left: REM(180);            top: REM(186);            background: url(../images/btn_wechat_begin.png) center center no-repeat;            background-size: 100% auto;            -webkit-background-size: 100% auto;        }    }    &-tips{        color: #e8e5b9;        font-size: REM(20);        text-align: center;        line-height: 1;    }}//pkSuccess.pkSuccess{    position: relative;    width: 100%;    height: 100%;    left: 0;    top: 0;    background: url(../images/bg2.jpg) center top no-repeat;    background-size: cover;    -webkit-background-size: cover;    .logo{          position: absolute;        width: REM(80);        height: REM(152);        left: REM(90);        top: REM(80);        img{            width: 100%;        }    }    &-inner{        position: absolute;        width: REM(660);        height: REM(680);        left: REM(50);        bottom: TOP(60);    }    &-container{        position: relative;        width: REM(660);        height: REM(490);        margin:0 auto;        background: url(../images/index_middle_bg.png) center bottom no-repeat;        background-size: 100% auto;        -webkit-background-size: 100% auto;    }    &-btns{        position: relative;        width: REM(660);        height: REM(170);        margin:REM(10) auto 0;          background: url(../images/index_middle_bg.png) center bottom no-repeat;        background-size: 100% auto;        -webkit-background-size: 100% auto;        &-inner{            position: relative;            width: REM(540);            height: REM(83);            margin:0 auto;            top: REM(50);            text-align: center;            div{                position: relative;                width: REM(248);                background-repeat: no-repeat;                background-size: 100% auto;                -webkit-background-size: 100% auto;                height: REM(83);                span{                    position: absolute;                    width: REM(32);                    height: REM(32);                    right: REM(4);                    top: REM(-4);                    color: #5a0c10;                    text-align: center;                    font-size: REM(16);                    line-height: REM(32);                    text-align: center;                    background: url(../images/circle_bg.png) center center no-repeat;                    background-size: 100% auto;                    -webkit-background-size: 100% auto;                }            }            .btn-double{                float: left;                background-image: url(../images/btn_double.png);            }            .btn-back{                float: right;                background-image: url(../images/btn_back2.png);            }        }    }    &-box{        position: relative;        width: REM(500);        height: REM(360);        margin:0 auto;        border-radius: REM(20);        -webkit-border-radius: REM(20);        background-color: #ffffff;        ul{            width: REM(460);            padding-top: REM(20);            margin: 0 auto;            li{                width: REM(420);                height: REM(130);                padding-top: REM(34);                padding-left: REM(40);                &:nth-child(1){                    border-bottom: solid 1px #e3e2e2;                }                &>div{                    float: left;                }            }        }    }    &-head{        width: REM(64);        height: REM(64);        margin-right: REM(20);        text-align: center;        div{            width: REM(64);            height: REM(64);            margin:0 auto;            background-color: #f9c374;            border-radius: 50%;            -webkit-border-radius: 50%;        }        img{            width: 100%;            height: 100%;            border-radius: 50%;            -webkit-border-radius: 50%;        }        span{            display: inline-block;            color: #5a0c10;            text-align: center;            font-size: REM(18);            margin-top: REM(6);            line-height: REM(24);        }        &-long{            width: REM(120);            margin-right: 0;        }    }    &-time{        font-size: REM(28);        color: #5a0c10;        font-weight: bold;        line-height: REM(72);        margin-left: REM(30);        span{            font-weight: normal;        }    }    .btn-lottery{        position: relative;        width: REM(232);        height: REM(84);        margin:REM(30) auto 0;        padding-left: REM(16);        letter-spacing: 1px;        text-align: center;        font-size: REM(24);        color: #570b10;        line-height: REM(74);        background: url(../images/btn_bg.png) center center no-repeat;        background-size: 100% auto;        -webkit-background-size: 100% auto;    }}//pkFail.pkFail{    position: relative;    width: 100%;    height: 100%;    left: 0;    top: 0;    background: url(../images/bg2.jpg) center top no-repeat;    background-size: cover;    -webkit-background-size: cover;    .logo{          position: absolute;        width: REM(80);        height: REM(152);        left: REM(90);        top: REM(80);        img{            width: 100%;        }    }    &-inner{        position: absolute;        width: REM(660);        height: REM(540);        left: REM(50);        bottom: TOP(100);    }    &-container{        position: relative;        width: REM(660);        height: REM(540);        margin:0 auto;        background: url(../images/index_middle_bg.png) center bottom no-repeat;        background-size: 100% auto;        -webkit-background-size: 100% auto;    }    &-box{        position: relative;        width: REM(500);        height: REM(360);        margin:0 auto;        border-radius: REM(20);        -webkit-border-radius: REM(20);        background-color: #ffffff;        ul{            width: REM(460);            padding-top: REM(20);            margin: 0 auto;            li{                width: REM(420);                height: REM(130);                padding-top: REM(34);                padding-left: REM(40);                &:nth-child(1){                    border-bottom: solid 1px #e3e2e2;                }                &>div{                    float: left;                }            }        }    }    &-head{        width: REM(64);        height: REM(64);        margin-right: REM(20);        text-align: center;        div{            width: REM(64);            height: REM(64);            margin:0 auto;            background-color: #f9c374;            border-radius: 50%;            -webkit-border-radius: 50%;        }        img{            width: 100%;            height: 100%;            border-radius: 50%;            -webkit-border-radius: 50%;        }        span{            display: inline-block;            color: #5a0c10;            text-align: center;            font-size: REM(18);            margin-top: REM(6);            line-height: REM(24);        }        &-long{            width: REM(120);            margin-right: 0;        }    }    &-time{        font-size: REM(28);        color: #5a0c10;        font-weight: bold;        line-height: REM(72);        margin-left: REM(30);        span{            font-weight: normal;        }    }    .btn-back{        position: relative;        width: REM(232);        height: REM(84);        margin:REM(40) auto 0;        padding-left: REM(16);        letter-spacing: 1px;        text-align: center;        font-size: REM(24);        color: #570b10;        line-height: REM(74);        background: url(../images/btn_back2.png) center center no-repeat;        background-size: 100% auto;        -webkit-background-size: 100% auto;    }}.share-img{    position: absolute;    width: 100%;    height: 100%;    left: 0;    top: 0;    z-index: 5000;    background-color: rgba(60,13,19,0.8);    img{        width: REM(423);        position: absolute;        top: REM(40);        right: REM(50);    }}.download,.pass{    position: relative;    width: 100%;    height: 100%;    left: 0;    top: 0;    background: url(../images/bg2.jpg) center top no-repeat;    background-size: cover;    -webkit-background-size: cover;    .logo{          position: absolute;        width: REM(80);        height: REM(152);        left: REM(70);        top: TOP(76);        img{            width: 100%;        }    }    &-inner{        position: absolute;        width: REM(640);        height: REM(660);        left: REM(60);        bottom: TOP(60);        background: url(../images/index_middle_bg.png) center bottom no-repeat;        background-size: 100% auto;        -webkit-background-size: 100% auto;    }    &-content{        position: relative;        width: REM(547);        height: REM(480);        padding-top: REM(114);        margin:0 auto;        background: url(../images/white_bg.png) center center no-repeat;        background-size: 100% auto;        -webkit-background-size: 100% auto;        text-align: center;        p{            font-size: REM(25);            color: #ae1e24;            line-height: REM(54);            span{                font-weight: bold;            }        }    }    .btn-back{        position: absolute;        width: REM(130);        height: REM(130);        top: TOP(26);        right: REM(30);        background: url(../images/btn_back.png) center center no-repeat;        background-size: 100% auto;        -webkit-background-size: 100% auto;    }}.linkTips{    position:absolute;    width: 100%;    height: 100%;    left: 0;    top: 0;    background:rgba(0,0,0,0.6);    z-index: 999;    &-inner{        position: relative;        width: REM(350);        margin:0 auto;        top: 50%;        transform: translateY(-50%);        -webkit-transform: translateY(-50%);    }    &-img{        width: REM(350);        height: REM(350);        img{            width: 100%;        }    }    .logo{          position: absolute;        width: REM(80);        height: REM(152);        left: REM(70);        top: TOP(76);        img{            width: 100%;        }    }    .btn-know{        position: relative;        width: REM(248);        height: REM(80);        left: 0;        margin:REM(80) auto 0;        text-align: center;        background: url(../images/btn_bg.png) center top no-repeat;        background-size: 100% auto;        -webkit-background-size: 100% auto;        span{            letter-spacing: 1px;            padding-left: REM(30);            font-size: REM(20);            color: #6e231a;            line-height: REM(72);        }    }}